原点|左上角_FlutterAlignmentFractionalOffsetAlignmentDirectional

篇首语：本文由编程笔记#小编为大家整理，主要介绍了Flutter Alignment FractionalOffset AlignmentDirectional相关的知识，希望对你有一定的参考价值。

Alignment
 

const Alignment(this.x, this.y)
    : assert(x !&＃61; null),
      assert(y !&＃61; null);

参数x&＃xff1a;-1&＃xff1a;最左边 1:最右边 0&＃xff1a;中间
参数y&＃xff1a;-1&＃xff1a;最上边 1:最下边 0&＃xff1a;中间

比如&＃xff1a;Alignment(0,0)代表控件的中心
坐标系如下图&＃xff1a;

Container(
          width: 300,
          height: 100,
          color: Color(0xFFFF0000),
          alignment: Alignment(1,0),
          child: Text(&＃39;Alignment(1,0)&＃39;,
          textDirection: TextDirection.rtl,),
        )

效果&＃xff1a;

 Alignment定义了我们常用的位置&＃xff1a;

/// The top left corner.
static const Alignment topLeft &＃61; Alignment(-1.0, -1.0);
/// The center point along the top edge.
static const Alignment topCenter &＃61; Alignment(0.0, -1.0);
/// The top right corner.
static const Alignment topRight &＃61; Alignment(1.0, -1.0);
/// The center point along the left edge.
static const Alignment centerLeft &＃61; Alignment(-1.0, 0.0);
/// The center point, both horizontally and vertically.
static const Alignment center &＃61; Alignment(0.0, 0.0);
/// The center point along the right edge.
static const Alignment centerRight &＃61; Alignment(1.0, 0.0);
/// The bottom left corner.
static const Alignment bottomLeft &＃61; Alignment(-1.0, 1.0);
/// The center point along the bottom edge.
static const Alignment bottomCenter &＃61; Alignment(0.0, 1.0);
/// The bottom right corner.
static const Alignment bottomRight &＃61; Alignment(1.0, 1.0);

FractionalOffset

FractionalOffset继承Alignment&＃xff0c;他们2个区别就是坐标系不一样&＃xff0c;Alignment的原点是中心&＃xff0c;而FractionalOffset原点是左上角。

Container(
          width: 300,
          height: 100,
          color: Color(0xFFFF0000),
          alignment: FractionalOffset(0,0),
          child: Text(&＃39;FractionalOffset(0,0)&＃39;,
          textDirection: TextDirection.rtl,),
        ),

效果&＃xff1a;

FractionalOffset定义了我们常用的位置&＃xff1a;

/// The top left corner.
static const FractionalOffset topLeft &＃61; FractionalOffset(0.0, 0.0);
/// The center point along the top edge.
static const FractionalOffset topCenter &＃61; FractionalOffset(0.5, 0.0);
/// The top right corner.
static const FractionalOffset topRight &＃61; FractionalOffset(1.0, 0.0);
/// The center point along the left edge.
static const FractionalOffset centerLeft &＃61; FractionalOffset(0.0, 0.5);
/// The center point, both horizontally and vertically.
static const FractionalOffset center &＃61; FractionalOffset(0.5, 0.5);
/// The center point along the right edge.
static const FractionalOffset centerRight &＃61; FractionalOffset(1.0, 0.5);
/// The bottom left corner.
static const FractionalOffset bottomLeft &＃61; FractionalOffset(0.0, 1.0);
/// The center point along the bottom edge.
static const FractionalOffset bottomCenter &＃61; FractionalOffset(0.5, 1.0);
/// The bottom right corner.
static const FractionalOffset bottomRight &＃61; FractionalOffset(1.0, 1.0);

AlignmentDirectional

AlignmentDirectional 的坐标系和Alignment比较像&＃xff0c;原点在中心&＃xff0c;不过AlignmentDirectional的起始位置和书写&＃xff08;TextDirection&＃xff09;方向有关

demo&＃xff1a;

Container(
      width: 300,
      height: 100,
      color: Color.fromARGB(255, 66, 165, 245),
      child: new Text(
        "Flutter Cheatsheet",
        textDirection: TextDirection.ltr,
        style: TextStyle(
        ),
      ),
      alignment: AlignmentDirectional.topStart,
    );

二真机上的效果&＃xff1a;